﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:local="clr-namespace:TutorialSL"
	x:Class="TutorialSL.TutorialPage"
	d:DesignWidth="624" d:DesignHeight="450" Background="White">

	<StackPanel x:Name="tutorial_page" VerticalAlignment="Top" Margin="0,8,0,0">
        <TextBlock x:Name="pre_exercise" HorizontalAlignment="Left" FontSize="13.333" Padding="0,0,0,8" FontFamily="Segoe UI" Text="This section blah blah  blah ..." Margin="8,8,8,0"/>
        <TextBlock x:Name="exercise" HorizontalAlignment="Left" FontSize="13.333" Padding="0,0,0,8" Foreground="Black" VerticalAlignment="Top" FontFamily="Segoe UI" Text="This section blah blah  blah ..." Margin="8,8,8,0"/>
        <StackPanel x:Name="start_tutorial" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,0,8,8" Visibility="Collapsed">
        	<Button Content="Start tutorial"/>
        </StackPanel>
		<StackPanel x:Name="tutorial_body" Margin="8,0" VerticalAlignment="Top">
			<local:StepControl />
			<local:StepControl />
		</StackPanel>
		<StackPanel x:Name="complete">
			<TextBlock x:Name="complete_title" Text="Section complete!" TextWrapping="Wrap" Margin="13,0,13,8" FontSize="16" FontWeight="Bold" FontFamily="Segoe UI"/>
			<Border x:Name="complete_wrapper" BorderBrush="#FFC8C8C8" BorderThickness="5" CornerRadius="10" Margin="8,0,8,8" Canvas.ZIndex="10">
				<StackPanel Margin="0">
					<TextBlock x:Name="complete_body" VerticalAlignment="Top" FontSize="16" Padding="7,6,7,0" HorizontalAlignment="Left" FontFamily="Segoe UI">
						<Run>Section complete!"</Run> 
					</TextBlock>
					<StackPanel Margin="8" Orientation="Horizontal" d:LayoutOverrides="HorizontalAlignment">
						<Button x:Name="next_chapter" Content="Move onto next chapter" Padding="5" FontFamily="Segoe UI" FontSize="12"/>
						<TextBlock Margin="5,5,5,0" Text="or" TextWrapping="Wrap" Visibility="Collapsed"/>
						<Button Content="select another" Padding="3" Visibility="Collapsed"/>
					</StackPanel>
				</StackPanel>
			</Border>
		</StackPanel>
	</StackPanel>
</UserControl>
